<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <style>
        html,body{
            height:100%;
        }
        body{
            background-color: #c2c2c2;
            display: flex;
            align-items: center;
        }
        .card{
            width:500px;
            margin:auto;
        }
        .card .header{
            text-align: center;
            font-size: 2em;
        }
    </style>
  </head>
  <body>
    <div class="layui-card card">
      <div class="layui-card-header header">注册</div>
      <div class="layui-card-body">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="username"
                required
                lay-verify="required|username"
                placeholder="请输入用户名"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
              <input
                type="password"
                name="pwd"
                required
                lay-verify="required|pwd"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
              <input
                type="password"
                name="confirm"
                required
                lay-verify="required|confirm"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="registerForm">
                立即提交
              </button>
              <button type="reset" class="layui-btn layui-btn-primary">
                重置
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
      //Demo
      layui.define(function () {
        let $ = layui.$;
        var form = layui.form;

        //监听提交
        form.on("submit(registerForm)", function (data) {
        //   layer.msg(JSON.stringify(data.field));
          $.ajax({
              type:"post",
              url:"/users",
              data:{
                  username:data.field.username,
                  pwd:data.field.pwd
              },
              success(){
                  window.location = "login.html"
              }
          });
          return false;
        });

        // 自定义校验规则
        form.verify({
            username(value,item){//value：表单的值、item：表单的DOM对象
                if(!/^\w{6,20}$/.test(value)){
                    return "用户名必须为6-20位字母、数字、下划线构成";
                }
                let msg;
                $.ajax({
                    type:"get",
                    url:"/users",
                    async:false,
                    data:{
                        username:value
                    },
                    success(data){
                        if(data.status == 0){
                            msg = "用户名重复";
                        }
                    }
                });
                return msg;
            },
            pwd(value,item){//value：表单的值、item：表单的DOM对象
                if(!/^.{6,20}$/.test(value)){
                    return "密码必须为6-20任意字符构成";
                }
            },
            confirm(value,item){
                if(value != $("[name=pwd]").val()){
                    return "两次密码不一致";
                }
            }
        });
      });
    </script>
  </body>
</html>
